<template>
    <div class="user-info-container">
        <div>
            <span class="title">ID:</span>
            <span>
                {{ getId}}
            </span>
        </div>
        <div>
            <span class="title">名字:</span>
            <span>
                {{userInfo.name}}
            </span>
        </div>
        <div>
           <span class="title">性别:</span>
            <span>
                {{userInfo.sex?"男":"女"}}
            </span>
        </div>
        <div>
            <span class="title">个人空间是否公开:</span>
            <span>
                {{userInfo.readroot ? "是":"否"}}
            </span>
        </div>
        <div>
            <span class="title">读者类型:</span>
            <span>
                {{userInfo.type}}
            </span>
        </div>

    </div>
</template>
<script>
export default {
    data(){
        return{
            userInfo:null
        }
    },
    async created(){//组件创建后就会向服务器发送用户信息请求，
        const result = await this.$axios.get("/api/user/one");
        this.userInfo = result;
        // console.log(this.userInfo);
        store.commit("setUserInfo",this.userInfo);
    },
    computed:{
        getId(){
            return $Cookies.get("userId");
        }
    }
}
</script>
<style lang="less">

@media screen and (max-width:600px) {
    .user-info-container{
        div{
            overflow: hidden;
            box-sizing: border-box;
            white-space: nowrap;
            text-overflow: ellipsis;

        }
    }
}
.user-info-container{
    width: 100%;
    padding: 10px;
    div{
        border-bottom: 1px solid #EbEEF5;
        padding: 10px;
       .title{
           display: inline-block;
           text-align: right;
           width: 50px;
           font-weight: 700;
           padding-right: 5px;
           
           
           
       }
    }
}


</style>